<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>角色管理</title>
	<meta th:replace="admin/template/head.html"/>
</head>
<body>


<form class="layui-form" action="" id="searchForm">
	<div class="layui-form-item">
		<br>
		<div class="layui-inline">
			<label class="layui-form-label">名称</label>
			<div class="layui-input-inline">
				<input type="text" name="searchName" id="searchName"  autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<a  onclick="doSearch()" class="layui-btn layui-btn-radius" >搜索</a>
			<button type="reset" class="layui-btn  layui-btn-radius ">重置</button>
		</div>
	</div>
</form>


<table class="layui-hide" id="role" lay-filter="role"></table>

<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<!--<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>-->
		<button class="layui-btn layui-btn-sm" lay-event="refresh">刷新数据</button>
	</div>
</script>
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>

<script type="text/html" id="editWin">
	<div class="layui-form" style="width: 400px; height: auto">
		<div class="layui-form-item layui-hide">
			<br>
			<div class="layui-inline">
				<label class="layui-form-label">id</label>
				<div class="layui-input-inline">
					<input type="text" autocomplete="off" id="id" name="id" class="layui-input" placeholder="请输入名称">
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<br>
			<div class="layui-inline">
				<label class="layui-form-label">名称</label>
				<div class="layui-input-inline">
					<input type="text" autocomplete="off" id="name" name="name" class="layui-input" placeholder="请输入名称">
				</div>
			</div>
		</div>
	</div>
</script>
<script th:replace="admin/template/picbox.html"></script>
<script>

	//判断是否是数字或字母
	const isNumberOr_Letter = val=> /^\w+$/.test(val);

	const editWin = (data = {})=> {
		let html = $('#editWin')[0].innerHTML;
		parent.layer.open({
			type: 1
			,offset: 'auto'
			,title: '角色编辑'
			,content: html
			,area: ['300', '400']
			,btn: ['保存', '关闭']
			,btnAlign: 'c'
			,success: function (layero, index) {
				/* 打开窗口时，判断编辑回显 */
				if(data.id) {
					layero.find('#name').val(data.name);
				}
			}
			,yes: function (index, layero) {
				let name = layero.find('#name')[0].value;
				/*  */
				if(!name || !name.replace(/[ ]/g, '')) return parent.layer.msg('请输入角色名称');
				/* 提交修改 */
				$.post('/role/edit', {
					id: data.id,
					name: name,
				}, res=> {
					parent.layer.msg(res.msg);
					if(res.code === 0) parent.layer.close(index);
					// 刷新数据列表
					doSearch();
				})
			}
			,cancel: function () {
				parent.layer.closeAll();
			}
		});
	}

	let $ ,layer,table;
	layui.use(['table','form'], function(){
		table = layui.table;
		const form = layui.form;
		$ = layui.jquery;
		layer = layui.layer;
		table.render({
			elem: '#role'
			,url:'/role/list'
			,toolbar: '#toolbarDemo'
			,title: '用户数据表'
			,totalRow: true
			,cols: [
				[
					{type: 'checkbox', fixed: 'left'}
					,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
					,{field:'name', title:'角色名称'}
					,{field:'updateTime', title:'更新时间'}
					,{fixed: 'right', title:'操作', toolbar: '#barDemo', width: 200}
				]
			]
			,page: true
			,limit: 10
			,limits: [10,50,80]
			,id:'roleTable',
            done:function(){
                console.log('表格渲染完成');
                lightbox();//绑定相册插件
            }
		});

		//工具栏事件
		table.on('toolbar(role)', function(obj){
			let checkStatus = table.checkStatus(obj.config.id);
			let data = checkStatus.data;
			switch(obj.event){
				case 'refresh':
					$('#searchForm')[0].reset();
					doSearch();
					break;
				case 'add':
					editWin();
					break;
			};
		});

		//工具条事件
		table.on('tool(role)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			let id = obj.data.id; //获得当前行数据
			let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			if(layEvent === 'del'){ //删除
				layer.confirm('真的删除本行及关联数据吗', function(index){
					obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
					layer.close(index);
					//向服务端发送删除指令
					$.get("/role/delete", {id: id},  res=> {
						layer.msg(res.msg);
					});
				});
			} else if(layEvent === 'edit'){ //编辑
				editWin(obj.data);
			}
		});

	});

	function doSearch() {
		//通过jquery获取参数的值
		let name = $("#searchName").val();
		table.reload('roleTable', {
			where: {
				name: name,
			},page: {
				curr:1
			}
		});

	}



</script>

</body>
</html>